<template>
  <div class="container">

    <Breadcrumb :items="['供应科', '供应管理']" />
    <YearData :productNameList="productNameList" :getProductName="getProductName" :getGuige="getGuige" :getNum="getNum" ref="yearData" />

    <a-card direction="vertical" :size="12" fill :title="`供应管理`">
      <ManageSearch
        :productNameList="productNameList"
        :houseList="houseList"
        :GonghuoList="GonghuoList"
        :addressList="addressList"
        :getManageList="getManageList"
        ref="manageSearch"
      />
      <a-row style="margin-bottom: 16px">
        <a-col :span="12">
          <a-space>
            <a-button type="primary" @click="openManageDialog">
              <template #icon>
                <icon-plus />
              </template>
              新增供应
            </a-button>
            <a-tooltip content="当前截至数据总数">
              <div class="action-icon" @click="getProducedataInfo(1)"
                >（总计{{ pagination.total }}条数据）</div
              >
            </a-tooltip>
            <a-tooltip :content="$t('searchTable.actions.refresh')">
              <div class="action-icon" @click="getManageList()"
                ><icon-refresh size="18"
              /></div>
            </a-tooltip>
          </a-space>
        </a-col>
      </a-row>
      <a-table
        :columns="columns"
        :data="managedata"
        size="large"
        :pagination="pagination"
        @page-change="handlePageChange"
        :bordered="{ wrapper: true, cell: true }"
      >
        <!-- 品名 -->
        <template #product_name_id="{ record }">
          <span>{{ getProductName(record.product_name_id) }}</span>
        </template>
        <!-- 供货厂家 -->
        <template #gonghuo_id="{ record }">
          <span>{{ getGonghuo(record.gonghuo_id) }}</span>
        </template>
        <!-- 规格 -->
        <template #guige="{ record }">
          <span>{{ getGuige(record.product_name_id) }}</span>
        </template>
        <!-- 数量 -->
        <template #num="{ record }">
          <span>{{ getNum(record.product_name_id,record.num) }}</span>
        </template>
        <!-- 仓库 -->
        <template #address_id="{ record }">
          <span>{{ getAddress(record.address_id) }}</span>
        </template>
        <!-- 库管 -->
        <template #house_id="{ record }">
          <span>{{ getHouseName(record.house_id) }}</span>
        </template>
        <!-- 操作 -->
        <template #action="{ record }">
          <a-button type="text" @click="editManage(record)">编辑</a-button>
        </template>
      </a-table>
    </a-card>
    <SaveManageDialog
      ref="saveManageDialog"
      :getManageList="getManageList"
      :productNameList="productNameList"
      :houseList="houseList"
      :GonghuoList="GonghuoList"
      :addressList="addressList"
    />
  </div>
</template>

<script lang="ts" setup>
import ManageSearch from './components/manageSearch.vue';
import SaveManageDialog from './components/saveManageDialog.vue';
import YearData from './components/yearData.vue';
import { ref, reactive } from 'vue';
import { getManage } from '@/api/manage';
import { Message } from '@arco-design/web-vue';
import {
  getManageProductName,
  getManageGonghuo,
  getManageAddress,
  getManageHouse,
} from '@/api/manage';

const productNameList = ref([]); // 品名列表
const houseList = ref([]); // 库管列表
const GonghuoList = ref([]); // 供货厂家列表
const addressList = ref([]); // 存放地点列表
const saveManageDialog = ref(null); // 新增供应弹窗
const manageSearch = ref(null); // 搜索表单
const yearData = ref(null)
const pagination = reactive({
  current: 1,
  total: 0,
  pageSize: 10,
});
const handlePageChange = (page) => {
  getManageList(page);
};
const openManageDialog = () => {
  saveManageDialog.value.openDialog();
};
const getManageList = async (currentPage = 1) => {
  managedata.value = [];
  let searchFrom = {};
  if (manageSearch.value && manageSearch.value.form) {
    searchFrom = manageSearch.value.form;
    console.log(searchFrom.jinghuo_time);
    searchFrom.begin_time = '';
    searchFrom.end_time = '';
    if (searchFrom.jinghuo_time.length > 0) {
      searchFrom.begin_time = searchFrom.jinghuo_time[0];
      searchFrom.end_time = searchFrom.jinghuo_time[1];
    }
  }
  if (typeof currentPage === 'number' && currentPage) {
    pagination.current = currentPage;
    searchFrom.current = currentPage;
  } else {
    searchFrom.current = 1;
  }
  const { data, code } = await getManage(searchFrom);
  if (code === 200) {
    pagination.total = data.total;
    managedata.value = data.records;
    yearData.value.getYearInfo()
  }
};

const editManage = (record: any) => {
  if (record.create_time) {
    const createDate = new Date(record.create_time);
    const now = new Date();
    const diff = now.getTime() - createDate.getTime();
    const tenMinutesInMs = 10 * 60 * 1000; // 10分钟的毫秒数
    if (!(diff >= 0 && diff <= tenMinutesInMs)) {
      Message.error('数据创建超过十分钟,暂不可修改');
      return;
    }
  }
  saveManageDialog.value.openDialog(record);
};
// 获取品名列表
const getProductNameList = async () => {
  const { data, code } = await getManageProductName();
  if (code === 200) {
    productNameList.value = data;
  }
};
const getGuige = (guige_id: number) => {
  const guige = productNameList.value.find(
    (item: any) => item.id === guige_id
  );
  return guige ? guige.guige + '/' + guige.unit  : '未知规格';
}
const getProductName = (product_name_id: number) => {
  const productName = productNameList.value.find(
    (item: any) => item.id === product_name_id
  );
  return productName ? productName.manage_product_name : '未知品名';
};
const getNum = (product_name_id: number,num) => {
  const numInfo = productNameList.value.find(
    (item: any) => item.id === product_name_id
  );
  return numInfo ? num + numInfo.unit : '未知数量';
}
// 获取库管列表
const getHouseList = async () => {
  const { data, code } = await getManageHouse();
  if (code === 200) {
    houseList.value = data;
  }
}; // 获取供货厂家列表
const getGonghuoList = async () => {
  const { data, code } = await getManageGonghuo();
  if (code === 200) {
    GonghuoList.value = data;
  }
};
const getHouseName = (house_id: number) => {
  const house = houseList.value.find((item: any) => item.id === house_id);
  return house ? house.house_name : '未知库管';
};
const getGonghuo = (gonghuo_id: number) => {
  const gonghuo = GonghuoList.value.find((item: any) => item.id === gonghuo_id);
  return gonghuo ? gonghuo.manage_gonghuo_name : '未知供货厂家';
};
// 获取存放地点列表
const getAddressList = async () => {
  const { data, code } = await getManageAddress();
  if (code === 200) {
    addressList.value = data;
  }
};
const getAddress = (address_id: number) => {
  const address = addressList.value.find((item: any) => item.id === address_id);
  return address ? address.manage_address : '未知存放地点';
};

const managedata = ref([]);
const columns = ref([
  {
    title: '#',
    dataIndex: 'id',
    slotName: 'id',
  },
  {
    title: '品名',
    dataIndex: 'product_name_id',
    slotName: 'product_name_id',
  },
  {
    title: '供货厂家',
    dataIndex: 'gonghuo_id',
    slotName: 'gonghuo_id',
  },
  {
    title: '规格',
    dataIndex: 'guige',
    slotName: 'guige',
  },
  {
    title: '数量',
    dataIndex: 'num',
    slotName: 'num',
  },
  {
    title: '存放地点',
    dataIndex: 'address_id',
    slotName: 'address_id',
  },
  {
    title: '库管',
    dataIndex: 'house_id',
    slotName: 'house_id',
  },
  {
    title: '进货时间',
    dataIndex: 'stock_time',
  },
  {
    title: '备注',
    dataIndex: 'remarks',
  },
  {
    title: '操作',
    dataIndex: 'action',
    slotName: 'action',
  },
]);

getProductNameList();
getHouseList();
getGonghuoList();
getAddressList();
getManageList()
</script>

<style scoped>
</style>
